<template>
  <div id="micro-communities" :style="{ backgroundColor: datas ? datas.preview_color || '#f2f2f2' : '#f2f2f2' }" style="text-align: left;">
    <postItem v-for="(item, i) in list" :data="item" :type="'micro'" :key="i" :show_time="false" :hide_comment="hide_comment">
      <div slot="operator">
          {{item.created_at}}
      </div>
    </postItem>
    <!-- <div class="post-item" v-for="(item, i) in list" :key="i" @click="jumpDetails(item.id)">
      <slot name="header" />
      <div class="post-header" v-if="item.has_one_stick_user">
        <van-image width="40px" height="40px" round :src="item.has_one_stick_user.avatar"></van-image>
        <div class="post-author">
          <div>{{ item.has_one_stick_user.nickname }}</div>
        </div>
      </div>
      <div class="post-body">
        <slot name="body" />
        <div class="post-title">{{ item.title }}</div>
        <div class="post-content" v-html="item.contents"></div>
        <slot name="content" />
        <div v-if="item.has_many_image && item.has_many_image.length > 1" class="post-images" :class="[postImagesClassName]" >
          <van-image class="post-image-item" v-for="(chi, itemIndex) in Imageslist(item.has_many_image)" :src="chi.url" radius="0.5rem" lazy-load :key="itemIndex" fit="cover"></van-image>
        </div>
        <div class="post-images" >
          <img class="post-image-item"
          :src="item.has_many_image[0] && item.has_many_image[0].url"
          radius="0.5rem"
          lazy-load
          @error="checkImg(item.id)"/>
        </div>
        <slot name="body-bottom" />
      </div>
      <div class="post-footer">
        <slot name="footer" />
        <ul class="post-statistics">
          <li class="post-statistics-item" @click.stop="handle(item.id)" :class="{ 'post-statistics-item-active': item.is_like }">
            <i class="post-statistics-icon iconfont icon-fontclass-dianzan"></i>
            {{ item.praise_num }}
          </li>
        </ul>
        <slot name="bottom" />
      </div>
    </div> -->
    <div class="load" v-if="!showLoading">
      <img src="../assets/images/video-loading.gif" alt="loading" />
    </div>
    <div class="h-625"></div>
    <div v-if="isDiy">
      <div style="width: 100%; height: 40px; line-height: 40px; text-align: center;" v-if="isLoadMore && showLoading" @click="getMoreData">{{ $i18n.t("加载更多") }}</div>
      <div style="width: 100%; height: 40px; line-height: 40px; text-align: center;" v-if="!isLoadMore && showLoading">{{ $i18n.t("没有更多了") }}~</div>
    </div>
  </div>
</template>

<script>
import { Image } from "vant";
import postItem from "./circleCommunity/postItem";
export default {
  components: { VanImage: Image, postItem },
  props: ["list", "showLoading", "isDiy", "id", "isLoadMore", "nowClick", "isclick", "datas","hide_comment"],
  data() {
    return {
      postImagesClassName: "post-images-multi",
      infoList: [],
      moreImg: "",
      showMoreImg: false
    };
  },
  mounted() {
    this.infoList = this.list;
    this.$emit("loadMore", true);
  },
  activated() {
    this.infoList = this.list;
    this.$emit("loadMore", true);
  },
  methods: {
    handle(tid) {
      $http.post("plugin.micro-communities.api.trick.givePraise", { tid }).then(res => {
        if (res.result == 1) {
          this.$toast(res.msg);
          let index = this.list.findIndex(item => item.id == tid);
          this.infoList[index].praise_num += 1;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    getMoreData() {
      this.$emit("getMore", true);
    },
    //检查图片是否加载成功
    checkImg(id) {
      this.list.forEach(item => {
        if (item.id == id) {
          item.has_many_image[0].url = "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/img_404.png";
        }
      });
    },
    jumpDetails(stickId) {
      if (this.nowClick === true) {
        return;
      }
      this.$router.push(
        this.fun.getUrl("microCommentDetails", {
          stickId
        })
      );
    }
  }
};
</script>

<style scoped lang="scss">
#micro-communities {
  padding: 0.625rem 0.9375rem;
}

.load {
  text-align: center;

  img {
    width: 3rem;
  }
}

.h-625 {
  height: 0.625rem;
}

.post-item {
  margin-bottom: 0.625rem;
  padding: 0.9375rem;
  text-align: left;
  background-color: white;
  border-radius: 0 0 0.5rem 0.5rem;
}

.post-header {
  display: grid;
  align-items: center;
  grid-template-columns: 2.5rem 10rem auto;
  width: 100%;
}

.post-author {
  margin-left: 0.5rem;
  font-size: 0.9375rem;
  color: #333;
}

.post-created-time {
  font-size: 0.75rem;
  color: #999;
}

.post-operator {
  justify-self: end;
}

.post-body {
  margin-top: 1.125rem;
}

.post-title {
  font-size: 1rem;
  color: #202020;
  word-break: break-all;
}

.post-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.875rem;
  line-height: 1.125rem;
  color: #868585;
  word-break: break-all;
}

.post-images {
  margin-top: 0.6875rem;
}

.post-images-multi {
  display: grid;
  grid-template-columns: repeat(3, 6.175rem);
  column-gap: 0.625rem;
  row-gap: 0.625rem;
  position: relative;
  padding: 0;
}

.post-image-item {
  width: 100%;
  max-width: 60%;
  max-height: 15.625rem;
  border-radius: 0.5rem;
}

.post-images-multi .post-image-item {
  height: 6.175rem;
  max-height: unset;
  max-width: unset;
}

.post-view-more {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 6.175rem;
  line-height: 6.175rem;
  width: 6.1125rem;
  text-align: center;
  color: white;
  font-size: 0.875rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  cursor: pointer;
}

.post-footer {
  margin-top: 0.5rem;
}

.post-circle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.9375rem 0.25rem 0.25rem;
  color: #6d99f3;
  background-color: #f1f6ff;
  border-radius: 0.5rem;
}

.post-circle-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.post-circle-name {
  margin-left: 0.25rem;
  max-width: 6.9375rem;
  overflow: hidden;
  font-size: 0.625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-statistics {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.4375rem;
  font-size: 0.625rem;
  color: #7c7c7c;
}

.post-statistics-item {
  margin-left: 0.8125rem;
}

.post-statistics-item-active {
  color: #3175fe;
}
</style>
